<script setup>
import { ref, onMounted, reactive } from 'vue'

// 不再需要加载指示器
const isLoading = ref(false)

// 显示的模块
const visibleModules = ref([])

// 使用reactive优化数据结构，并按优先级划分
const modules = reactive([
  {
    id: 1,
    title: '基本信息',
    desc: '记录您的个人健康档案',
    icon: '/static/basic-info.png',
    path: '/pages/basic-info/index',
    isLoaded: true,
    priority: 1 // 高优先级
  },
  {
    id: 2,
    title: '健康指导',
    desc: '专业中医养生指导方案',
    icon: '/static/health-guide.png',
    path: '/pages/health-guide/index',
    isLoaded: true,
    priority: 1 // 高优先级
  },
  {
    id: 3,
    title: '监测提醒',
    desc: '定时提醒健康监测事项',
    icon: '/static/monitor-reminder.png',
    path: '/pages/monitor-reminder/index',
    isLoaded: true,
    priority: 2 // 中优先级
  },
  {
    id: 4,
    title: '服务网点',
    desc: '查找附近中医服务网点',
    icon: '/static/service-points.png',
    path: '/pages/service-points/index',
    isLoaded: true,
    priority: 2 // 中优先级
  },
  {
    id: 5,
    title: '多点健康',
    desc: '多维度健康数据分析',
    icon: '/static/health-points.png',
    path: '/pages/health-points/index',
    isLoaded: true,
    priority: 3 // 低优先级
  },
  {
    id: 6,
    title: '休闲娱乐',
    desc: '健康相关休闲活动',
    icon: '/static/entertainment.png',
    path: '/pages/entertainment/index',
    isLoaded: true,
    priority: 3 // 低优先级
  }
])

// 页面加载完成时执行
onMounted(() => {
  // 直接显示所有模块 - 不用任何延迟
  visibleModules.value = modules
})

// 导航到其他页面
function navigateTo(path) {
  // 判断是否为tabBar页面，如果是则使用switchTab
  const tabBarPages = [
    '/pages/home/index', 
    '/pages/mine/index'
  ]
  
  if (tabBarPages.includes(path)) {
    uni.switchTab({
      url: path,
      fail: function(err) {
        console.error('导航失败:', err)
      }
    })
  } else {
    uni.navigateTo({
      url: path,
      fail: function(err) {
        console.error('导航失败:', err)
      }
    })
  }
}
</script>

<template>
  <view class="container">
    <!-- <view class="header"> -->
      <!-- <image class="logo" src="/static/logo.png" mode="aspectFit" /> -->
      <!-- <view class="title">知录我&健康-中医健康管家</view> -->
    <!-- </view> -->
    
    <view class="module-grid">
      <view 
        v-for="module in visibleModules" 
        :key="module.id"
        class="module-item"
        @tap="navigateTo(module.path)"
      >
        <image class="module-icon" :src="module.icon" mode="aspectFit" />
        <!-- <text class="module-title">{{ module.title }}</text>
        <text class="module-desc">{{ module.desc }}</text> -->
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container
{
    display: flex;
    flex-direction: column;

    min-height: 100vh;
    padding: 30rpx;

    transform: translateZ(0); /* 硬件加速 */

    /* 移除背景色，让全局背景图显示 */
    /* background-color: #f5f5f5; */
    background-image: url('/static/home-bg.jpg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: transparent;
}

.header
{
    display: flex;
    align-items: center;
    flex-direction: column;

    margin-bottom: 60rpx;

    animation: fadeIn .3s ease-out;

    .logo
    {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;

        will-change: transform; /* 优化图片渲染 */
    }

    .title
    {
        font-size: 36rpx;
        font-weight: bold;

        text-align: center;

        color: #333;
    }
}

.module-grid
{
    display: grid;
    flex: 1;

    animation: slideIn .3s ease-out;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 200rpx;
	justify-content: center; /* 水平居中 */
    gap: 10rpx;
	margin-top: 400rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;

    .module-item
    {
		height: 200rpx;
		width: 90%;
        display: flex;
		justify-content: center;
        align-items: center;
        flex-direction: column;

		margin-left: 10rpx;
        margin-bottom: 0;
        padding: 10rpx;

        transition: transform .2s ease-out;

        opacity: 1;
        border-radius: 12rpx;
        // background-color: #fff;
        // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .05);

        will-change: transform; /* 优化渲染 */

        &:active
        {
            transform: scale(.98);

            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, .06);
        }

        .module-icon
        {
            width: 100%;
            height: 100%;
            object-fit: cover;
            // margin-bottom: 30rpx;
        }

        .module-title
        {
            font-size: 34rpx;
            font-weight: bold;

            margin-bottom: 15rpx;

            color: #333;
        }

        .module-desc
        {
            font-size: 26rpx;
            line-height: 1.4;

            text-align: center;

            color: #666;
        }
    }
}

@keyframes fadeIn
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes slideIn
{
    from
    {
        transform: translateY(10rpx);

        opacity: 0;
    }
    to
    {
        transform: translateY(0);

        opacity: 1;
    }
}

</style>